<script setup lang="ts">
import { ref, reactive , computed} from "vue";
import { graphic } from "echarts/core";
import { currentGET } from "@/api";
const props = defineProps({
    title: {
        type: String,
        default: ''
    },
    totalNum: {
        type: Number,
        default: 0
    },
    list: {
        type: Array,
        default: () => { }
    },
    // apiKey: {
    //     type: String,
    //     default: ''
    // },
    // params: {
    //     type: Object,
    //     default: () => { }
    // },
    width: {
        type: String,
        default: '100%'
    },
    height: {
        type: String,
        default: '100%'
    },
    chartOptions: {
        type: Object,
        default: () => { }
    }
})
let colors = ["#49BBAA", "#34A7DE", "#49BBAA", "#9A9EFE", "#49BBAA"];
// const option = ref({});
// const state = reactive({
//   // lockNum: 0,
//   // offlineNum: 0,
//   // onlineNum: 0,
//   // alarmNum: 0,
//   totalNum: 0,
//   list: []
// });
const echartsGraphic = (colors: string[]) => {
  return new graphic.LinearGradient(1, 0, 0, 0, [
    { offset: 0, color: colors[0] },
    { offset: 1, color: colors[1] },
  ]);
};
// const getData = () => {
//   currentGET(props.apiKey, props.params).then((res) => {
//     console.log(res);
//     if (res.success) {
//       // state.lockNum = res.data.lockNum;
//       // state.offlineNum = res.data.offlineNum;
//       // state.onlineNum = res.data.onlineNum;
//       // state.alarmNum = res.data.alarmNum;
//       state.totalNum = res.data.totalNum;
//       state.list = res.data.list;
//       setOption();
//     }
//   });
// };
// getData();
const option = computed(() => {
  return {
    title: {
      top: "center",
      left: "center",
      text: [`{value|${props.totalNum}}`, "{name|总数}"].join("\n"),
      textStyle: {
        rich: {
          value: {
            color: "#ffffff",
            fontSize: 24,
            fontWeight: "bold",
            lineHeight: 20,
            padding:[4,0,4,0]
          },
          name: {
            color: "#ffffff",
            lineHeight: 20,
          },
        },
      },
    },
    tooltip: {
      trigger: "item",
      backgroundColor: "rgba(0,0,0,.6)",
      borderColor: "rgba(147, 235, 248, .8)",
      textStyle: {
        color: "#FFF",
      },
    },
    series: [
      {
        name: props.title,
        type: "pie",
        radius: ["40%", "70%"],
        // avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 6,
          borderColor: "rgba(255,255,255,0)",
          borderWidth: 2,
        },
        color: colors,
        label: {
          show: true,
          formatter: "   {b|{b}}   \n   {c|{c}个}   {per|{d}%}  ",
          //   position: "outside",
          rich: {
            b: {
              color: "#fff",
              fontSize: 12,
              lineHeight: 26,
            },
            c: {
              color: "#31ABE3",
              fontSize: 14,
            },
            per: {
              color: "#31ABE3",
              fontSize: 14,
            },
          },
        },
        emphasis: {
          show: false,
        },
        legend: {
          show: false,
        },
        tooltip: { show: true },

        labelLine: {
          show: true,
          // length: 20, // 第一段线 长度
          // length2: 36, // 第二段线 长度
          smooth: 0.2,
          lineStyle: {},
        },
        data: props.list,
      },
    ],
  };
});
</script>

<template>
    <v-chart class="chart" :style="{ 'width': width,'height': height}" :option="option" />
</template>

<style scoped lang="less"></style>
